<template>

   <div>
     <el-breadcrumb separator-class="el-icon-arrow-right">
       <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
       <el-breadcrumb-item>数据中心</el-breadcrumb-item>
       <el-breadcrumb-item>客户管理</el-breadcrumb-item>
     </el-breadcrumb>
     <el-card class="box-card">

     <el-form ref="form"  label-width="80px">
       <el-row :gutter="24">
         <el-col :span="4"><div class="grid-content bg-purple">
       </div>
           <el-input v-model="custForm.name" placeholder="名称"></el-input>
       </el-col>
         <el-col :span="5"><div class="grid-content bg-purple">
         </div>
             <el-date-picker
               v-model="custForm.startDate"
               type="date"
               placeholder="开始日期">
             </el-date-picker>
         </el-col>
         <el-col :span="5"><div class="grid-content bg-purple">
         </div>
             <el-date-picker
               v-model="custForm.endDate"
               type="date"
               placeholder="结束日期">
             </el-date-picker>

         </el-col>
           <el-button type="primary" @click="searchList">查询</el-button>
           <el-button type="primary" @click="addCust()">添加</el-button>
           <el-button type="primary" @click="importExcelVisible=true">导入</el-button>
           <el-button type="primary" @click="exportExcel()">导出</el-button>
       </el-row>


     </el-form>
     <el-table
       :data="customerList"
       style="width: 100%">
       <el-table-column
         prop="code"
         label="编号"
         >
       </el-table-column>
       <el-table-column
         prop="name"
         label="名称"
         >
       </el-table-column>
       <el-table-column

         label="首次合作时间">
         <template slot-scope="scope">
           {{scope.row.cooperDate|datefmt('YYYY/MM/DD')}}
         </template>
       </el-table-column>
       <el-table-column
         prop="address"
         label="公司地址"
       >
       </el-table-column>
       <el-table-column
         label="操作">
         <template slot-scope="scope">
           <el-dropdown>
              <span class="el-dropdown-link">
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
             <el-dropdown-menu slot="dropdown">
               <el-button type="text" @click="find(scope.row.id)">编辑</el-button>
               <el-button type="text" @click="del(scope.row.id)">删除</el-button>
               <el-button type="text" @click="addLink(scope.row.id)">添加联系人</el-button>
               <el-button type="text" @click="findLink(scope.row.id)">查看联系人</el-button>
             </el-dropdown-menu>
           </el-dropdown>




         </template>
       </el-table-column>
     </el-table>

       <el-pagination
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
         :current-page="page.pagenum"
         :page-sizes="[5,10 , 15, 20]"
         :page-size="page.pagesize"
         layout="total, sizes, prev, pager, next, jumper"
         :total="total">
       </el-pagination>

       <el-dialog title="导入联系人信息" :visible.sync="importExcelVisible" :close-on-click-modal="false" width="25%">
         <el-upload
           class="upload-demo"
           drag
           :headers="auth"
           action="/api/customer/importExcel"
           :on-success="uploadExcelsuccess"
           multiple>
           <i class="el-icon-upload"></i>
           <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
           <div class="el-upload__tip" slot="tip">上传客户信息</div>
         </el-upload>
       </el-dialog>
       <el-dialog :close-on-click-modal="false"  :visible.sync="userFormVisible" width="1000px">
         <el-table
           :data="ManList"
           stripe
           style="width: 100%">


           <el-table-column
             label="姓名"
             prop="name"
             width="130">
           </el-table-column>
           <el-table-column
             label="电话"
             prop="tel"
             width="130">
           </el-table-column>
           <el-table-column
             label="性别">
             <template slot-scope="scope">
               {{scope.row.sex | sexFit}}
             </template>
           </el-table-column>
           <el-table-column
             label="邮箱"
             prop="email">
           </el-table-column>
           <el-table-column
             label="收件地址"
             prop="recvAddress" width="130">
           </el-table-column>
           <el-table-column
             label="职位"
             prop="position" width="120">
           </el-table-column>
           <el-table-column
             label="描述"
             prop="remarks" width="160">
           </el-table-column>

         </el-table>
       </el-dialog>

     </el-card>
   </div>
</template>

<script>
    export default {
        name: "CustomerList",
      data(){
          return{
            customerList:[],
            currentPage4: 4,
            page: {
              pagenum: 0,
              pagesize: 5
            },
            total:0,
            custForm:{},
            auth:{token:null},
            importExcelVisible:false,
            ManList:[],
            userFormVisible:false,
          }
      },
      methods:{
          addLink(id){
            this.$router.push("addlinkMan?id="+id);
          },
        findLink(id){
            this.userFormVisible=true;
            this.$http.get("customer/findLink/"+id).then((res)=>{
              this.ManList=res.data.result;
            })

        },
        exportExcel(){
          location.href="http://localhost:8080/customer/exportExcel";
        },
        uploadExcelsuccess(){
          this.importExcelVisible=false;
          this.searchList();
        },
          searchList(){

            this.$http.post("/customer/list/"+this.page.pagenum+"/"+this.page.pagesize,this.custForm).then((res)=>{
              this.customerList=res.data.result.list;
              this.total=res.data.result.total;
            })
          },
        handleSizeChange(val) {
          this.page.pagesize=val;
          this.searchList();
        },
        handleCurrentChange(val) {
          this.page.pagenum=val;
          this.searchList();
        },
        addCust(){
            this.$router.push("addCust");
        },
          find(id){
         this.$router.push("updateCust?id="+id);
        },
        del(id){
          this.$http.get("customer/del/"+id).then((res)=>{
            this.$message(res.data.message);
          })
          window.location.reload();
        }
      },
      filters:{
        sexFit:function (val) {
          if(val==0){
            return "男"
          }
          if(val==0){
            return "女";
          }
        }
      },
      mounted() {
          this.searchList();
          this.auth.token=sessionStorage.getItem("token");
      }
    }

</script>

<style scoped>

</style>
